iT邦幫忙

material you相關文章
共有 26 則文章
鐵人賽 Mobile Development DAY 30

技術 Day30 Motion - Fade through 、Fade(3)

繼前兩天章節 Day28 使用M3的Motion - Transition Patterns四種模式,其中的Container transform patter...

鐵人賽 Mobile Development DAY 29

技術 Day29 使用M3的Motion - Shared axis(2)

繼前一章節 Day28 使用M3的Motion - Transition Patterns四種模式,其中的Container transform pattern...

鐵人賽 Mobile Development DAY 28

技術 Day28 使用M3的Motion - Transition Patterns四種模式,其中的Container transform patterns (1)

Material Design的Motion由四種模式組成,用於在元件或全屏檢視之間過渡轉換動畫,這些模式主要在透過加強使用者介面元素之間的關係來幫助使用者瀏覽...

鐵人賽 Mobile Development DAY 26

技術 Day26 使用M3的Progress Indicators

Progress 有分兩種類型 Linear progress indicator Circular progress indicator 實作上探討...

鐵人賽 Mobile Development DAY 24

技術 Day24 使用M3的Sliders

Sliders是使用條形的滑動進行檢視和選值或範圍,非常適合調整音量和亮度等設定等。 Silders 有分兩種類型 Continuous slider Di...

鐵人賽 Mobile Development DAY 23

技術 Day23 使用M3MaterialSwitch

當需要開啟或關閉單一選項時,可使用Switch ,最常用於手機裝置,以啟用和禁用選項或是選單中的選項。開啟和關閉表示一個具有兩種狀態的按鈕,開關由軌道和拇指組成...

鐵人賽 Mobile Development DAY 22

技術 Day22 使用M3的Navigation bar

Navigation bar 主要手機裝置位於螢幕底部固定呈現,通常顯示3~5個item,當需要5個以上、3個以下皆考慮使用Chips 、navigation...

鐵人賽 Mobile Development DAY 21

技術 Day21 使用M3的Navigation rail

Navigation rail 元件會顯示在應用程式中每個螢幕的同一側,顯示3到7個item。通常適用於平板的螢幕上,但也可以在手機裝置上使用,判斷螢幕寬度大小...

鐵人賽 Mobile Development DAY 20

技術 Day20 使用M3的Navigation drawer

Navigation drawer 預設情況下可以開啟或關閉,以適應不同的應用程式佈局,有兩種型別的Standard、Modal。Standard標準非常適合頻...

鐵人賽 Mobile Development DAY 18

技術 Day18 使用M3的Menus

選單內容應適合使用者需求,同時易於開啟、關閉和互動。當用戶與按鈕、操作或其他控制元件互動時,會出現選單。 1. Dropdown menus 2. Expose...

鐵人賽 Mobile Development DAY 17

技術 Day17 使用M3的Divider

Divider 分隔線(MaterialDivider)是一個可用於佈局的檢視,將內容清晰的劃分。分隔線長度可伸縮性,例如用於分離列表項或定義長度。 M3新增內...

鐵人賽 Mobile Development DAY 16

技術 Day16 使用M3的Dialogs

通常我們大家熟悉的Dialogs 是讓使用者需要的操作、內容包含簡明扼要的陳述或問題。 Dialogs在應用程式內容前面,同時禁用所有應用程式功能,以提供關鍵資...

鐵人賽 Mobile Development DAY 15

技術 Day15 使用M3的Bottom sheets

BottomSheets 分成兩種 Standard bottom sheet Modal bottom sheet M3新增內容 顏色:新的顏色對映和...

鐵人賽 Mobile Development DAY 14

技術 Day14 延續前實戰新增 FAB + Bottom App Bar 實作

延續之前實作的「Day09 實戰簡易的卡片瀏覽頁面」後,將Day10~Day12學會MDC Components的Floating Action Buttons...

鐵人賽 Mobile Development DAY 13

技術 Day 13 使用 M3 的Chips

主要功能在幫助輸入信息、進行選擇、過濾內容或觸發操作,Chipa和Button有相似之處在於它們都提供視覺提示用戶採取行動和做出選擇。 但是有一些重要的區別,C...

鐵人賽 Mobile Development DAY 12

技術 Day12 使用 M3 的 Bottom App Bar

Bottom app bar BottomAppBars 使用操作上是類似 NavigationBars,但NavigationBars使用在切換頁面,Bott...

鐵人賽 Mobile Development DAY 11

技術 Day 11 使用 M3 的 Extended Floating Action Button(下)

延續上一篇 Floating Action Buttons (上) 在上一篇FAB提到的icon必須清晰易懂,因為按鈕沒有文字描述,Extended FABs可...

鐵人賽 Mobile Development DAY 10

技術 Day10 使用 M3 的 Floating Action Buttons (FAB) (上)

在Material Design中提供不同樣式的Button,官方同時說明使用Button需根據操作的重要性選擇類型,當操作越重要時Button應該越具有強調性...

鐵人賽 Mobile Development DAY 8

技術 Day08 使用 M3 的 AppBarLayout

Top app bar 提供與當前螢幕相關的內容和操作,通常是與裝置的寬度相同。 將APP的主題使用NoActionBar,如<style name=&q...

鐵人賽 Mobile Development DAY 7

技術 Day07 使用 M3 的 MaterialCardView

使用Card顯示單個主題的內容和操作,也是作為進入更深層次細節或導航的切入點,例如音樂專輯或即將到來的假期的詳細資訊。呈現Cards可以是一起顯示在網格、垂直列...

鐵人賽 Mobile Development DAY 6

技術 Day06 使用 M3 的 Segmented Buttons

在Material Design中提供不同樣式的Button,官方同時說明使用Button需根據操作的重要性選擇類型,當操作越重要時Button應該越具有強調性...

鐵人賽 Mobile Development DAY 5

技術 Day05 使用M3 Icon button

在Material Design中提供不同樣式的Button,官方同時說明使用Button需根據操作的重要性選擇類型,當操作越重要時Button應該越具有強調性...

鐵人賽 Mobile Development DAY 4

技術 Day04 實戰登入頁面

在前兩篇學會MDC Components的Button和Text Field,所以已經可以來實作一個「登錄頁面」。 介紹的內容: 使用 IDE版本 : A...

鐵人賽 Mobile Development DAY 3

技術 Day03 使用 Text fields

Text fields 是讓可輸入欄位,並且提示容易讓使用者理解的資訊,同時可以有顯示輸入的錯誤訊息。 簡單介紹 有兩種Text fields,都提供相同的功能...

鐵人賽 Mobile Development DAY 2

技術 Day02 一般常見 Button

在Material Design中提供不同樣式的Button,官方同時說明使用Button需根據操作的重要性選擇類型,當操作越重要時Button應該越具有強調性...

鐵人賽 Mobile Development DAY 1

技術 Day01 踏入Google的設計語言

這次Kotlin 實踐 Material Design 懶人包,文章主要關注在 Material Design components 的實作上,所以會有大量實作...